<template>
  <div class="submenu" v-show="hidearrc">
    <h4 class="submenu-title">
      <i>{{ subTitle }}</i>
    </h4>
    <ul class="submenu-list" v-show="hidearrc">
      <li
        @click="handlerRoute(item, index)"
        v-for="(item, index) in menuList"
        :key="index"
        :class="{ active: lastRoute == item.code }"
      >
        <span
          :class="[
            item.children && item.children.length > 0 == 1
              ? 'haschildren'
              : 'nochildren',
          ]"
        >
          <i
            v-show="item.children && item.children.length > 0"
            class="icon iconfont"
            :class="[iconfonts(item.name)]"
          ></i>
          {{ item.name }}
        </span>
        <div v-show="item.children && item.children.length > 0">
          <p
            v-for="(item2, ind) in item.children"
            @click.stop="handlerRoute(item2, index)"
            :key="ind"
            :class="{ active: lastRoute == item2.code }"
          >
            {{ item2.name }}
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import { siteDomain } from "@/environment/index";
import Vue from "vue";
export default {
  data() {
    return {
      hidearrc: true,
      children: [],
      lastRoute: "",
      parentPath: "",
      subTitle: "",
    };
  },

  methods: {
    handlerRoute(item, index) {
      //有三级路由时，二级路由不跳转
      if (item.children && item.children.length > 0) {
        return;
      }

      this.$router.push(item.path);
      console.log(this.lastRoute)
      return;
      
    },
    iconfonts(code) {
      switch (code) {
        case "mysite":
          return "iconicon-dash-Mymanagement";
        case "wechataccount":
          return "iconicon-dash-Publicpromotion";
        case "seo":
          return "iconicon-dash-seo";
        case "sitemanage":
          return "iconicon-dash-Webmanagement";
        case "sitemember":
          return "iconicon-dash-membermanagement";
        case "controlmanege":
          return "iconicon-dash-zhujian";
        case "form":
          return "iconicon-dash-zhujian";
      }
    },
  },
  mounted() {
    window.addEventListener("setItem", (e) => {
      this.hidearrc = JSON.parse(e.newValue);
    });
    let routerList = this.$route.path.split("/");
    let [, firstRoute, lastRoute] = this.$route.path.split("/");
    this.lastRoute = routerList[routerList.length - 1];
    this.parentPath = firstRoute;
  },
  computed: {
    menuList() {
      let menuList1 = this.$store.state.dashboard.menuList;
      let children = [];
      menuList1.map((item) => {
        if (this.parentPath == item.code) {
          this.subTitle = item.name;
          children = item.children;
        }
      });
      return children;
    },
  },
  watch: {
    $route(to, from) {
      let routerList = this.$route.path.split("/");
      let [, firstRoute, lastRoute] = this.$route.path.split("/");
      this.lastRoute = routerList[routerList.length - 1];
      this.parentPath = firstRoute;
    },
  },
};
</script>
<style lang="scss" scoped>
.submenu {
  width: 130px;
  height: 100vh;
  background: $--color-black-light;
  border-right: $--border-base;
  .submenu-title {
    height: 50px;
    line-height: 50px;
    color: $--color-white;
    font-size: $--font-size-small;
    text-align: center;
  }
  .submenu-list {
    li {
      cursor: pointer;
      line-height: 36px;
      font-size: $--font-size-small;
      span {
        display: inline-block;
        color: $--color-white;
        height: 36px;
        line-height: 36px;
        width: 100%;
        cursor: pointer;
      }
      .nochildren {
        text-align: center;
        &:hover {
          color: $--color-white;
          background: rgba(245, 246, 247, 0.1);
        }
      }
      .haschildren {
        padding-left: 0px;
        cursor: default;
        i {
          width: 14px;
          height: 36px;
          font-size: $--font-size-small;
          line-height: 36px;
          padding: 0 12px;
          color: $--color-white;
        }
      }
      p {
        cursor: pointer;
        padding-left: 40px;
        line-height: 36px;
        font-size: $--font-size-small;
        color: $--color-text-regular;
        &:hover {
          color: $--color-white;
          background: rgba(245, 246, 247, 0.1);
        }
      }
    }
  }
}
.active {
  color: $--color-primary !important;
  span {
    color: $--color-primary !important;
  }
}
.active:hover {
  color: $--color-white;
  background: rgba(245, 246, 247, 0.1);
}
</style>
